<template>
  <div>
    <el-dialog title="注册用户" :visible.sync="show" width="25%">
      <el-form ref="form" label-position="left" :model="user">
        <el-form-item label="账号类型：">
          <el-radio-group v-model="user.type">
            <el-radio-button label="1">医护人员</el-radio-button>
            <el-radio-button label="2">学生</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-input v-model="user.userName" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="user.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="user.confirmPassword" type="password" placeholder="请输入确认密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="user.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>

        <el-form-item>
          <div style="display: flex;justify-content: space-between">
            <div style="width: 60%;">
              <el-input v-model="user.accessCode" placeholder="请输入验证码"></el-input>
            </div>
            <el-button style="width: 35%;" @click="sendCode" :disabled="remainingTime > 0">
              {{ remainingTime > 0 ? remainingTime + '秒后再试' : '发送验证码' }}
            </el-button>
          </div>

        </el-form-item>

      </el-form>

      <el-button @click="handSubmit" type="primary" style="width: 100%;">确定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import {code} from "@/api/system";
import {register} from "@/api/login";

export default {
  data() {
    return {
      user: {
        userName: '',
        password: '',
        confirmPassword: '',
        type: '2',
        email: '',
        accessCode: ''
      },
      isDisabled: false,//是否禁止发送验证码
      remainingTime: 0,//发送验证码剩余时间
    }
  },
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handSubmit() {
      register(this.user).then(res => {
        this.$message.success('注册成功')
        this.show = false
      }).catch(err => {
      })
    },
    async sendCode() {
      await this.startCountdown(this.user.email);
    },
    async startCountdown(email) {
      // 如果已经在倒计时中，则不允许再次发送验证码
      if (this.remainingTime > 0) {
        return;
      }
      //发送验证码
      code(email).then(res => {
        this.$message.success("发送成功")
      }).catch(err => {
        this.$message.error("发送失败")
      })
      // 开始倒计时，60秒后才允许再次发送验证码
      this.remainingTime = 60
      // 等待60秒后停止倒计时
      await this.stopCountdown()
    },

    async stopCountdown() {
      return new Promise((resolve) => {
        const intervalId = setInterval(() => {
          if (this.remainingTime > 0) {
            this.remainingTime--
          } else {
            clearInterval(intervalId);
            this.remainingTime = 0
            resolve();
          }
        }, 1000);
      });
    },
  },
  computed: {
    show: {
      get: function () {
        return this.isShow
      },
      set: function (newValue) {
        this.$emit('update:isShow', newValue)
      }
    }
  }
}
</script>

<style scoped>

</style>
